<template>
  <div>
    <el-dialog :title="titleText == '' ? '录入' : '更正'" :visible="showDialog" width="30%" :before-close="handleClose"
      :close-on-click-modal="false">
      <div class="content">
        <el-form :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item class="activeClassInput" label="识别的车牌号" prop="">
            <el-input v-model="titleText" :disabled="true" placeholder="请输入车牌号"></el-input>
          </el-form-item>
          <el-form-item label="更正的车牌号" prop="">
            <el-input v-model="titleTextEdit" placeholder="请输入车牌号" @keyup.native.enter="handleSubmit"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer">
        <el-button class="submit" @click.native="handleSubmit">确 认</el-button>
        <el-button class="back" @click="handleClose">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import rules from '@/utils/rules'
export default {
  props: ['showDialog', 'setTableData'],
  data() {
    return {
      titleText: '',
      rules: rules,
      titleTextEdit: ''
    };
  },
  methods: {
    handleClose() {
      this.$emit('update:showDialog', false)
    },
    handleSubmit() {
      this.setTableData(this.titleTextEdit);
      this.$emit('update:showDialog', false)
      this.titleText = '';
      this.titleTextEdit = ''
    },
  },
  mounted() {
  }
}
</script>

<style lang='scss' scoped>
.activeClassInput {
  ::v-deep .el-input__inner {
    color: rgb(92, 112, 234) !important;
    height: 36px;
    font-weight: 900;
    font-size: 17px;
  }

  ::v-deep .el-input--suffix {
    font-size: 17px;
    color: rgb(92, 112, 234) !important;
    height: 36px;
    font-weight: 900;
  }
}
</style>
